<!---父组件与子组件之间的数据传递-->

<!---引入vue框架-->
<script src="vue.js"></script>
<!--界面显示-->
<div id="app">
    <prpet></prpet>
</div>
<!---自定义子组件模板-->
<template id="chaild1">
    <div>
        <!---点击事件调用send方法-->
        <button @click="send">发送</button>
        <!---文本框进行双向绑定msg-->
        <input type="text" v-model="msg"/>
    </div>
</template>
<!---脚本定义-->
<script>
    //注册父组件
    Vue.component('prpet',{
        data(){
            return{
                msg:''
            }
        },
       //引入子组件，组建当中childfn 名字要给出父组件的方法名prpetfn
       template:'<div><child @childfn="prpetfn"></child>'+"获取子组件的信息为：{{msg}}</div>",

       methods:{
        prpetfn(value){
            this.msg=value;
        }
       }
        });
        Vue.component('child',{
            template:'#chaild1',
        data(){
            return{
                msg:''
            }
        },
      methods:{
        send(){
            this.$emit('childfn',this.msg)
        }
      }
    })
    var vue=new Vue({
        el:"#app"
    })
</script>